<template>
    <div id="root">
        <div class="todo-container">
            <div class="userinfo">
                <el-tag>{{username}}</el-tag>
                <el-tag type="danger" @click="logout">退出</el-tag>
            </div>
            <div class="todo-wrap">
                <my-header :add="add" />
                <my-list :todoList="todos" :checkDone="checkDone" :deleteTodo="deleteTodo" />
                <my-footer :todoList="todos" :checkAll="checkAll" :delAllTodo="delAllTodo"/>
            </div>
        </div>
    </div>
</template>

<script>
import MyFooter from "./components/MyFooter.vue";
import MyList from "./components/MyList.vue";
import MyHeader from "./components/MyHeader.vue";

export default {
    name: "App",
    components: {
        MyFooter,
        MyList,
        MyHeader,
    },
    data() {
        return {
            todos: [
                {
                    id: "001",
                    name: "学习",
                    done: true,
                },
                {
                    id: "002",
                    name: "敲代码",
                    done: false,
                },
                {
                    id: "003",
                    name: "听歌",
                    done: true,
                },
                {
                    id: "004",
                    name: "吃饭",
                    done: false,
                },
            ],
            username:""
        };
    },
    methods: {

        logout(){
            localStorage.clear();
            this.$router.push("login")
        },
        //完成或者是取消完成十强
        checkDone(id) {
            this.todos.forEach((item) => {
                if (item.id == id) {
                    item.done = !item.done;
                }
            });
        },
        add(obj) {
            this.todos.unshift(obj);
        },
        deleteTodo(id) {
            this.todos = this.todos.filter((item) => {
                if (item.id !== id) {
                    return true;
                } else {
                    return false;
                }
            });
        },
        checkAll(done) {
            this.todos.forEach((item) => {
                item.done = done;
            });
        },
        delAllTodo() {

            this.todos = this.todos.filter((item) => {
                return !item.done;
            });
        },
    },
    created(){
        let info = localStorage.getItem("token");
        let item = JSON.parse(info)
        this.username=  item.username
    }
};
</script>

<style>
body {
    background: #fff;
}

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
}

.btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
}

.btn:focus {
    outline: none;
}

.todo-container {
    width: 600px;
    margin: 0 auto;
}
.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.userinfo{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
}
</style>
